<script lang="ts" setup>
import type { FormRules } from 'element-plus';

import { reactive, ref } from 'vue';

import { VIcon } from '@croco/framework/icons';
import { VPasswordStrength } from '@croco/framework/libraries';
import { $t } from '@croco/framework/locales';
import { useUserStore } from '@croco/framework/stores';

import { logout } from '#/api';
import { service } from '#/api/request';

const { userInfo } = useUserStore();

const formRef = ref();
const form = reactive({
    password: undefined,
    newPassword: undefined,
    confirmPassword: undefined,
});

function validator(rule: any, value: any, callback: any) {
    if (!value) {
        callback(new Error($t('ui.formRules.required')));
        return;
    }
    switch (rule.field) {
        case 'confirmPassword': {
            if (value === form.newPassword) {
                callback();
            } else {
                callback(new Error($t('authentication.confirmPasswordTip')));
            }
            break;
        }
        case 'newPassword': {
            if (value === form.password) {
                callback(new Error('新旧密码不能一样'));
            } else {
                callback();
            }
            break;
        }
        case 'password': {
            service.post('/system/user/check/password', { username: userInfo.username, password: value }).then((rs) => {
                if (rs) {
                    callback();
                } else {
                    callback(new Error($t('authentication.passwordErrorTip')));
                }
            });
            break;
        }
        // No default
    }
}

const rules = ref<FormRules<typeof form>>({
    password: [{ required: true, trigger: 'blur', validator }],
    newPassword: [{ required: true, trigger: 'blur', validator }],
    confirmPassword: [{ required: true, trigger: 'blur', validator }],
});

const onSubmit = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            service.put('/profile/password', { username: userInfo.username, password: form.newPassword }).then(({ code }) => {
                code === 200 && logout();
            });
        } else {
            return false;
        }
    });
};
</script>

<template>
    <el-tabs model-value="first" class="kt-tabs__button password-tabs">
        <el-tab-pane name="first">
            <template #label>
                <span style="font-size: 20px">修改密码</span>
            </template>
            <el-alert show-icon style="margin-bottom: 15px" title="密码更新成功后，您将被重定向到登录页面，您可以使用新密码重新登录。" type="info" :closable="false" />
            <el-form ref="formRef" :model="form" :rules="rules" :validate-on-rule-change="false" label-width="100px" style="max-width: 460px">
                <el-form-item label="旧密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入旧密码" show-password type="password" />
                    <div class="el-form-item-msg">必须提供当前登录用户密码才能进行更改</div>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <template #label="{ label }">
                        <div class="flex-center">
                            <span>
                                {{ label }}
                            </span>
                            <el-tooltip :content="$t('authentication.passwordStrength')">
                                <VIcon icon="icon:question-filled" />
                            </el-tooltip>
                        </div>
                    </template>
                    <el-input v-model="form.newPassword" placeholder="请输入新密码" show-password type="password" />
                    <VPasswordStrength :password="form.newPassword" class="w-full" />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" placeholder="请再次输入新密码" show-password type="password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit()">
                        <template #icon>
                            <VIcon icon="carbon:save" />
                        </template>
                        {{ $t('common.confirm') }}
                    </el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<style scoped></style>
